<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-check"
          type="success"
          size="mini"
          :disabled="multiple"
          @click="changeMessageReadStatus1"
          v-hasPermi="['system:message:remove']"
        >已读
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:message:remove']"
        >删除
        </el-button>
      </el-col>
      <div style="float: right">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
        </el-tooltip>
      </div>
    </el-row>

    <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="消息内容" width="420" prop="messageContent" :show-overflow-tooltip="true"/>
      <el-table-column label="消息类型" width="120" align="center" prop="messageTitle" :show-overflow-tooltip="true"/>
      <el-table-column label="发送人" width="120" align="center" prop="fromName" :show-overflow-tooltip="true"/>
      <el-table-column label="发送时间" align="center" prop="createTime" width="150" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否已读"
        align="center"
        prop="readStatus"
        :formatter="statusFormat"
        width="80"
      />
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleDeit(scope.row)"
            v-hasPermi="['system:user:edit']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:user:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="消息内容" center :visible.sync="open" width="500px" @close="onClose">
      <div v-if="messageById.type=='0'">
        <div class="base-info-head">申请信息
          <el-button style="float: right;height: 48px" type="text"
                     @click="jumpClick"
                     v-if="fromUser.deptStatus!='1'"
          >申请信息已审批，前往社团
          </el-button>
        </div>
        <div class="base-info-content-show" v-if="messageById.payload">
          <ul>
            <li>
              <div class="content-show-l">申请人用户名</div>
              <div class="content-show-r">{{ messageById.fromName }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>申</span><span>请</span><span>人</span><span>姓</span><span>名</span></div>
              <div class="content-show-r">{{ messageById.payload.name }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>申</span><span>请</span><span>人</span><span>班</span><span>级</span></div>
              <div class="content-show-r">{{ messageById.payload.class }}</div>
            </li>
            <li>
              <div class="content-show-l">申请人手机号</div>
              <div class="content-show-r">{{ messageById.payload.phone }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>申</span><span>请</span><span>理</span><span>由</span></div>
              <div class="content-show-r">{{ messageById.payload.remark }}</div>
            </li>
          </ul>
        </div>
        <div style="text-align: center;margin-top: 20px;" slot="footer" class="dialog-footer" v-if="fromUser.deptStatus=='1'">
          <el-button type="primary" round @click="handleUpdate('agree',fromUser)">同 意</el-button>
          <el-button @click="handleUpdate('refuse')" type="danger" round style="margin-left: 30px;">拒 绝</el-button>
        </div>

        <el-dialog title="拒绝原因" width="30%" :visible.sync="open2" append-to-body center>
          <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="12px">
            <el-form-item label=" " prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入拒绝原因" :maxlength="500" show-word-limit
                        :autosize="{minRows: 5, maxRows: 20}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="submitForm(fromUser)" type="danger" round>提 交</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-if="messageById.type=='2'">
        <div class="base-info-head">论坛发贴审核
          <el-button style="float: right;height: 48px" type="text"
                     @click="jumpClick2"
          >前往社联论坛处理
          </el-button>
        </div>
        <div class="base-info-content-show" v-if="messageById.payload">
          <ul>
            <li>
              <div class="content-show-l">发贴人用户名</div>
              <div class="content-show-r">{{ messageById.fromName }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>发</span><span>贴</span><span>时</span><span>间</span></div>
              <div class="content-show-r">{{ messageById.createTime }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>发</span><span>贴</span><span>标</span><span>题</span></div>
              <div class="content-show-r">{{ messageById.payload.forumTitle }}</div>
            </li>
            <li>
              <div class="content-show-l"><span>发</span><span>贴</span><span>内</span><span>容</span></div>
              <div class="content-show-r">
                <div class="editor ql-container ql-snow">
                  <div class="ql-editor" v-html="messageById.payload.forumContent"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
<!--        <div style="text-align: center;margin-top: 20px;" slot="footer" class="dialog-footer" v-if="user.deptStatus=='1'">
          <el-button type="primary" round @click="handleUpdate('agree',user)">同 意</el-button>
          <el-button @click="handleUpdate('refuse')" type="danger" round style="margin-left: 30px;">拒 绝</el-button>
        </div>

        <el-dialog title="拒绝原因" width="30%" :visible.sync="open2" append-to-body center>
          <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="12px">
            <el-form-item label=" " prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入拒绝原因" :maxlength="500" show-word-limit
                        :autosize="{minRows: 5, maxRows: 20}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="submitForm(user)" type="danger" round>提 交</el-button>
          </div>
        </el-dialog>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {globalBus} from "@/utils/globalBus";
import {addMessage, delMessage, delMessageReadStatus1, listMessage,} from "@/api/system/message";
import {changeDept,getUser} from "@/api/system/user";
import Editor from '@/components/Editor'
import user from "@/store/modules/user";

export default {
  name: "Info",
  compoents:{Editor},
  data() {
    return {
      activeName: '1',
      // 是否显示弹出层
      open: false,
      open2: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 用户表格数据
      messageList: [],
      readStatusOptions: [],
      form: {},
      rules: {
        remark: [{required: true, message: '拒绝原因不能为空', trigger: 'blur'}],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: '0',
        toId: undefined
      },
      messageById: '',
      fromUser:{}
    };
  },
  computed: {
    ...mapGetters([
      'user',
    ])
  },
  created() {
    this.getDicts("sys_message_read").then(response => {
      this.readStatusOptions = response.data;
    });
    this.getList()
  },
  methods: {
    // 刷新消息未读条数
    refresh() {
      globalBus.$emit('messageTotle', 'messageTotle');
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      if (this.user.admin){
        this.queryParams.identity='0'
      }else {
        this.queryParams.identity='1'
        this.queryParams.toId = this.user.userId
      }
      // this.queryParams.toId = this.user.userId
      listMessage(this.queryParams).then(response => {
          this.messageList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    //关闭
    onClose() {
      this.refresh()
      this.getList()
    },
    //查看
    async handleDeit(row) {
      await delMessageReadStatus1(row.messageId);
      getUser(row.fromId).then(res=>{
        this.fromUser=res.data
        this.messageById = JSON.parse(JSON.stringify(row))
        this.messageById.payload = JSON.parse(this.messageById.payload)
        this.open = true;
      })
    },
    //跳转社团
    jumpClick() {
      this.open = false
      this.$router.push('/system/dept')
      this.refresh()
      this.getList()
    },
    jumpClick2(){
      this.open = false
      this.$router.push('/system/forum')
      this.refresh()
      this.getList()
    },
    /** 审核按钮操作 */
    handleUpdate(btn, row) {
      if (btn == 'agree') {
        this.$confirm('是否确认同意"' + row.userName + '"的用户入团?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeDept(JSON.stringify(row), 'agree');
        }).then(() => {
          this.msgSuccess("同意入团成功");
          this.refresh()
          this.getList()
          this.open = false
          let message = {
            fromId: this.user.userId,
            fromName: this.user.userName,
            toId: row.userId,
            toName: row.userName,
            messageTitle: this.info.deptTitle,
            payload: JSON.stringify({remark: this.info.deptInfo}),
            messageContent: this.infoMsg('deptSqAgree', row.dept.deptName),
            type:'0'
          }
          addMessage(message)
        })
      } else if (btn == 'refuse') {
        this.reset()
        this.open2 = true
        /*this.$confirm('是否确认拒绝"' + row.userName + '"的用户入团?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeDept(JSON.stringify(row), 'refuse');
        }).then(() => {
          this.getList();
          this.msgSuccess("拒绝入团成功");
          let message = {
            fromId: this.user.userId,
            fromName: this.user.userName,
            toId: row.userId,
            toName: row.userName,
            messageTitle: '社团申请拒绝',
            messageContent: '【' + row.dept.deptName + '】社团负责人拒绝了您的申请，请注意查看！'
          }
          addMessage(message)
        })*/
      }
    },
    //拒绝提交
    submitForm(row) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          changeDept(JSON.stringify(row), 'refuse').then(res => {
            this.msgSuccess("拒绝入团成功");
            this.open2 = false
            this.open = false
            this.refresh()
            this.getList()
            let message = {
              fromId: this.user.userId,
              fromName: this.user.userName,
              toId: row.userId,
              toName: row.userName,
              messageTitle: this.info.deptTitle,
              payload: JSON.stringify(this.form),
              messageContent: this.infoMsg('deptSqRefuse', row.dept.deptName),
              type:'0',
            }
            addMessage(message)
          });
        }
      })
    },
    //阅读状态已读
    changeMessageReadStatus1() {
      const messageIds = this.ids;
      this.$confirm('是否确认将消息标记为已读?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delMessageReadStatus1(messageIds);
      }).then(() => {
        this.refresh();
        this.getList();
        this.msgSuccess("标记已读成功");
      })
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.readStatusOptions, row.readStatus);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.messageId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      console.log(row)
      const messageIds = row.messageId || this.ids;
      this.$confirm('是否确认删除消息?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delMessage(messageIds);
      }).then(() => {
        this.refresh();
        this.getList();
        this.msgSuccess("删除成功");
      })
    }
  }
};
</script>

<style scoped>
.jujue /deep/ .el-textarea__inner {
  height: 100px;
  min-height: 100px;
}

/deep/ .el-pagination__editor.el-input .el-input__inner {
  height: 28px;
  line-height: 36px;
}

/deep/ .el-dialog--center .el-dialog__body {
  text-align: initial;
  padding: 20px 20px 20px;
}

.base-info-head {
  text-align: left;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 600;
  color: #2E2E2E;
  padding-left: 16px;
  border-bottom: 1px solid #F0F0F2;
}

.base-info-content-show {
  cursor: pointer;
  /*padding: 16px 112px 16px 0;*/
  padding: 10px 20px 10px 0;
  position: relative;
  background: #F8F8F8;
}

.base-info-content-show ul li {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.base-info-content-show ul li .content-show-l {
  width: 85px;
  color: #555666;
  margin-right: 40px;
  font-weight: 600;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /*padding-left: 16px;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.base-info-content-show ul li .content-show-r {
  color: #222226;
  word-break: break-all;
}
</style>
